<template>
  <div class="user-manage">
    <div class="query-form">
      <el-form ref="form" :inline="true" :model="queryForm">
        <el-form-item label="账号" prop="username">
          <el-input v-model="queryForm.username" clearable/>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="queryForm.phone" clearable/>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="queryForm.nickname" clearable/>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="queryForm.name" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleCreate">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <el-table :data="userList" >
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="username" label="账号" width="150" />
        <el-table-column prop="nickname" label="昵称" width="150" />
        <el-table-column prop="name" label="姓名" width="150" />
        <el-table-column prop="phone" label="手机号" width="150" />
        <el-table-column prop="role_name" label="角色" width="200" />
        <el-table-column prop="create_time" label="创建时间" />
        <el-table-column prop="login_time" label="登录时间" />
        <el-table-column label="操作" width="300">
          <template #default="scope">
            <el-button v-if="'admin' !== scope.row.phone" @click="handleEdit(scope.row)" size="small">编辑</el-button>
            <el-button v-if="'admin' !== scope.row.phone" type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:10px;"></div>
      <el-pagination
          v-model:current-page="queryForm.pageNum"
          v-model:page-size="queryForm.pageSize"
          :page-sizes="[15, 30, 60]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          :total="queryForm.total"
          :page-size="queryForm.pageSize"
          @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog :title="title" v-model="showModal">
      <el-form ref="dialogForm" :model="userForm" label-width="100px" :rules="rules">
        <el-form-item label="账号" prop="username">
          <el-input v-model="userForm.username" placeholder="请输入账号"/>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="userForm.name" placeholder="请输入姓名"/>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="userForm.nickname" placeholder="请输入昵称"/>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="userForm.phone" placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input type="password" v-model="userForm.pwd" placeholder="默认密码123456"/>
        </el-form-item>
        <el-form-item label="角色" prop="role_id">
          <el-select
              v-model="userForm.role_id"
              placeholder="请选择角色"
              multiple filterable value-key="role_id"
          >
            <el-option
                v-for="role in roleList"
                :key="role.role_id"
                :label="role.role_name"
                :value="role.role_id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </template>

    </el-dialog>
  </div>

</template>

<script>
export default {
  name: "user",
  data() {
    return {
      queryForm: {
        pageNum: 1,
        pageSize: 15,
        total: 0,
      },
      showModal:false,
      title:'',
      userForm:{
        name:'',
        nickname:'',
        phone:'',
        username:'',
        pwd:''
      },
      rules:{
        username:[
          {
            required:true,
            message:'请输入昵称',
            trigger:'blur'
          },
        ],
      },
      userList: [],
      roleList:[],
    }
  },
  mounted() {
    this.getUserList()
  },
  methods: {
    async getUserList(){
      try {
        const res = await this.$api.getUserList(this.queryForm)
        if(res.code === 200){
          this.userList = res.data.list
          this.queryForm.total = res.data.total
        }
      } catch (error) {

      }
    },
    // 查询用户列表
    handleQuery(){
      this.getUserList()
    },
    // 重置查询表单
    handleRest(form){
      this.$refs[form].resetFields()
    },
    //切换每页条数
    handleSizeChange(pageSize){
      this.queryForm.pageSize = pageSize;
      this.getOplogList()
    },
    // 分页处理
    handleCurrentChange(current){
      this.queryForm.pageNum = current
      this.getUserList()
    },
    // 用户单个删除
    async handleDel(row){
      let res = await this.$api.userDel({
        user_id:row.user_id
      })
      if(res.code === 200){
        this.$message.success(res.msg)
        this.getUserList()
      }else{
        this.$message.error(res.msg)
      }
    },
    // 用户新增
    handleCreate(){
      this.action = 'add'
      this.title = '新增'
      this.userForm = {};
      this.getRoleAllList();
    },
    // 用户编辑
    handleEdit(row){
      this.action = 'edit'
      this.title = '修改'
      Object.assign(this.userForm, row);
      this.getRoleAllList();
    },
    // 角色列表查询
    async getRoleAllList(){
      let res = await this.$api.roleListAll()
      if(res.code === 200){
        this.roleList = res.data
        this.showModal = true
      }
    },
    // 用户弹框关闭
    handleClose(){
      this.showModal = false
      this.handleRest('dialogForm')
    },
    // 用户提交
    handleSubmit(){
      this.$refs.dialogForm.validate(async (valid) =>{
        if (valid) {
          this.userForm.role_id = typeof(this.userForm.role_id) === "object"?JSON.stringify(this.userForm.role_id):this.userForm.role_id;
          let res;
          if('add'===this.action){
            res = await this.$api.userSave(this.userForm)
          }else if('edit'===this.action){
            res = await this.$api.userUpdate(this.userForm)
          }
          if(res.code === 200){
            this.$message.success(res.msg)
            this.handleClose();
            this.getUserList()
          }else{
            this.$message.error(res.msg)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">

</style>
